<template>
  <div>
    <div class="md:mx-2 md:my-2">
      <DashBoardPicker
        class="w-full enter-x"
        ref="timeServiceEndpointInstancePickerRef"
        :initData="initData"
        @success="handleSuccess"
      >
      </DashBoardPicker>
    </div>
    <a-tabs v-model:activeKey="activeKey" type="card" :animated="true" :tabBarGutter="0">
      <a-tab-pane key="1" tab="Global">
        <!--  forceRender -->
        <GlobalPage :start="start" :end="end" :step="step" />
      </a-tab-pane>
      <a-tab-pane key="2" tab="Service">
        <ServicePage :start="start" :end="end" :step="step" :serviceName="serviceName" />
      </a-tab-pane>
      <a-tab-pane key="3" tab="Instance">
        <InstancePage
          :start="start"
          :end="end"
          :step="step"
          :serviceName="serviceName"
          :instanceName="instanceName"
        />
      </a-tab-pane>
      <a-tab-pane key="4" tab="Endpoint">
        <EndpointPage
          :start="start"
          :end="end"
          :step="step"
          :serviceName="serviceName"
          :instanceName="instanceName"
          :endpointName="endpointName"
        />
      </a-tab-pane>
      <template #renderTabBar="{ DefaultTabBar, ...props }">
        <component :is="DefaultTabBar" v-bind="props" :style="{ opacity: 0.8, color: 'grey' }" />
      </template>
    </a-tabs>
  </div>
</template>
<script lang="ts">
import { TabPane, Tabs, Card } from 'ant-design-vue';
import { defineComponent, ref } from 'vue';
import GlobalPage from './pages/GlobalPage.vue';
import DashBoardPicker from '../../common/DashBoardPicker.vue';
import StatisticCard from './cards/StatisticCard.vue';
import ServicePage from './pages/ServicePage.vue';
import InstancePage from './pages/InstancePage.vue';
import EndpointPage from './pages/EndpointPage.vue';
/* eslint-disable */
export default defineComponent({
  components: {
    ATabs: Tabs,
    ATabPane: TabPane,
    GlobalPage,
    DashBoardPicker,
    Card,
    StatisticCard,
    ServicePage,
    InstancePage,
    EndpointPage,
  },
  setup() {
    const timeServiceEndpointInstancePickerRef = ref();

    const initData = ref();
    const start = ref();
    const end = ref();
    const step = ref();
    const serviceName = ref();
    const instanceName = ref();
    const endpointName = ref();

    const handleSuccess = (params) => {
      start.value = params.duration.start;
      end.value = params.duration.end;
      step.value = params.duration.step;
      serviceName.value = params.serviceId;
      instanceName.value = params.instanceId;
      endpointName.value = params.endpointId;
    };

    return {
      activeKey: ref('1'),
      timeServiceEndpointInstancePickerRef,
      initData,
      start,
      end,
      step,
      serviceName,
      instanceName,
      endpointName,
      handleSuccess,
    };
  },
});
</script>
